<template>
    <div class="login-form">
        <div class="toggle">
            <a @click="isMsgLogin=false" v-if="isMsgLogin" href="javascript:;">
                <i class="iconfont icon-user"/> 使用账号登录
            </a>
            <a @click="isMsgLogin=true" v-else href="javascript:;">
                <i class="iconfont icon-msg"/> 使用短信登录
            </a>
        </div>
        <div class="form">
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item prop="mobile" v-if="isMsgLogin">
                    <el-input v-model="form.mobile" placeholder="请输入手机号">
                        <el-button slot="prepend" icon="iconfont icon-user"/>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code" v-if="isMsgLogin">
                    <el-input v-model="form.code" placeholder="请输入验证码">
                        <el-button slot="prepend" icon="iconfont icon-lock"/>
                        <el-button slot="append" @click="send">{{time===0?'发送验证码':`${time}秒后发送`}}</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="account" v-if="!isMsgLogin">
                    <el-input v-model="form.account" placeholder="请输入用户名">
                        <el-button slot="prepend" icon="iconfont icon-user"/>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" v-if="!isMsgLogin">
                    <el-input v-model="form.password" placeholder="请输入密码">
                        <el-button slot="prepend" icon="iconfont icon-lock"/>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>


        <div class="agree">
            <el-checkbox v-model="isAgree">我已同意</el-checkbox>
            <a href="javascript:;">《隐私条款》</a>
            <span>和</span>
            <a href="javascript:;">《服务条款》</a>
        </div>

        <a href="javascript:;" class="btn" @click="submit">登录</a>

        <div class="action">
            <a href="https://graph.qq.com/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Flogin%2Fcallback">
                <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
            </a>
            <div class="url">
                <a href="javascript:;">忘记密码</a>
                <a href="javascript:;">免费注册</a>
            </div>
        </div>


    </div>
</template>

<script>
    import {userAccountLogin, userMobileLogin, userMobileLoginMsg} from "@/api/user";
    import {useIntervalFn} from "@vueuse/shared";

    export default {
        name: "LoginForm",
        data() {
            const checkMobile = (rule, value, callback) => {
                if (!/^1[3-9]\d{9}$/.test(value)) {
                    callback(new Error('手机号格式不正确'));
                }
                callback();
            };

            return {
                isMsgLogin: false,
                isAgree: true,
                time: 0,
                resume: null,
                form: {
                    account: null,//zhousg
                    password: null,//123456
                    mobile: null,//13241051259
                    code: null
                },
                rules: {
                    account: [{required: true, message: '请输入用户名', trigger: 'blur'},],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'},],
                    mobile: [{required: true, message: '请输入手机号', trigger: 'blur'},
                        {validator: checkMobile, trigger: 'blur'}],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'},]
                }
            }
        },
        created() {

            const {pause, resume} = useIntervalFn(() => {
                this.time--
                if (this.time < 1) {
                    pause()
                }
            }, 1000, false)
            this.resume = resume
        },
        methods: {
            submit() {
                if (!this.isAgree) {
                    this.$message.error('请勾选登录协议');
                    return;
                }
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        let data = null
                        if (this.isMsgLogin) {
                            const {result} = await userMobileLogin(this.form)
                            data = result
                        } else {
                            const {result} = await userAccountLogin(this.form)
                            data = result
                        }
                        this.$store.commit('user/setUser', data)
                        // 合并购物车操作
                        this.$store.dispatch('cart/mergeCart').then(() => {
                            this.$router.push(this.$route.query.redirectUrl || '/')
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            send() {
                if (this.time !== 0) {
                    return
                }
                this.$refs.form.validateField('mobile', async (str) => {
                    if (str.length === 0) {
                        await userMobileLoginMsg(this.form.mobile)
                        this.time = 60
                        this.$message.success('短信发送成功，请注意查收')
                        this.resume()
                    }
                })
            }
        },
        watch: {
            isMsgLogin: {
                handler() {
                    this.$refs.form.resetFields()
                }

            }
        }
    }
</script>

<style scoped lang="less">

    .login-form {
        .toggle {
            text-align: right;
            padding: 15px 40px;

            a {
                color: @xtxColor;
            }

            i {
                font-size: 14px;
            }
        }

        .form {
            padding: 0 40px;
        }

        .agree {
            padding-left: 40px;

            a {
                color: #069;
            }
        }

        .btn {
            margin: 20px 40px;
            display: block;
            flex: 1;
            height: 40px;
            color: #fff;
            background: @xtxColor;
            text-align: center;
            line-height: 40px;

            &.disabled {
                background: #cdcdcd;
            }
        }

        .action {
            display: flex;
            padding: 20px 40px;
            justify-content: space-between;
            align-items: center;

            .url {
                a {
                    color: #999;
                    margin-left: 10px;
                }
            }
        }
    }


</style>